<template>
  <scroll-view class="sidebar" scroll-y="true">
    <uni-data-menu
      ref="menu"
      :value="currentMenu"
      :staticMenu="sideBar.staticMenu"
      :page-size="500"
      :field="field"
      where="enable==true"
      orderby="sort asc"
      active-text-color="#409eff"
      @select="select"
    ></uni-data-menu>
  </scroll-view>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      sideBar: {
        // 左侧菜单
        // 配置静态菜单列表（放置在用户被授权的菜单列表下边）
        staticMenu: [
          {
            menu_id: "goods",
            text: "首页",
            icon: "uni-icons-home",
            value: "/"
          },
          {
            menu_id: "goods",
            text: "商品管理",
            icon: "admin-icons-kaifashili",
            value: "/pages/demo/table/table"
          },
          {
            menu_id: "order",
            text: "订单管理",
            icon: "admin-icons-manager-role",
            value: "/pages/demo/table/table"
          },
          {
            menu_id: "income",
            text: "收入查询",
            icon: "admin-icons-doc",
            value: "/pages/demo/table/table"
          },
          {
            menu_id: "shop",
            text: "门店管理",
            icon: "admin-icons-manager-menu",
            value: "/pages/demo/table/table"
          }
        ]
      },
      field:
        "url as value, name as text, menu_id, parent_id, sort, icon, permission",
      currentMenu: "/"
    };
  },
  computed: {
    ...mapState("app", ["inited", "navMenu", "active"]),
    userInfo() {
      return this.$store.state.user.name;
    }
  },

  watch: {
    // #ifdef H5
    $route: {
      immediate: true,
      handler(newRoute, oldRoute) {
        const path = newRoute.fullPath;
        if (path) {
          this.currentMenu = this.splitFullPath(path);
        }
      }
    },
    // #endif
    userInfo: {
      // immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          // 当用户信息发生变化后，重新加载左侧menu
          this.$nextTick(function () {
            this.$refs.menu.load();
          });
        }
      }
    }
  },
  methods: {
    ...mapActions({
      setRoutes: "app/setRoutes"
    }),
    select(e, routes) {
      let url = e.value;
      console.log(e);
      if (!url) {
        url = this.active;
      }
      this.clickMenuItem(url);
      this.setRoutes(routes);
      // #ifdef H5
      // #ifdef VUE3
      uni.hideLeftWindow();
      // #endif
      // #endif
    },
    clickMenuItem(url) {
      // #ifdef H5
      if (url.indexOf("http") === 0) {
        return window.open(url);
      }
      // #endif

      // url 开头可用有 / ，也可没有
      if (url[0] !== "/" && url.indexOf("http") !== 0) {
        url = "/" + url;
      }
      // #ifndef H5
      if (url === "/") {
        url = config.index.url;
      }
      // #endif
      // TODO 后续要调整
      uni.redirectTo({
        url: url,
        fail: () => {
          uni.showModal({
            title: "提示",
            content: "页面 " + url + " 跳转失败",
            showCancel: false
          });
        }
      });
    },
    splitFullPath(path) {
      if (!path) {
        path = "/";
      }
      return path.split("?")[0];
    }
  }
};
</script>

<style lang="scss">
.sidebar {
  position: fixed;
  // top: var(--top-window-height); // useless
  width: 240px;
  height: calc(100vh - (var(--top-window-height)));
  box-sizing: border-box;
  border-right: 1px solid darken($left-window-bg-color, 8%);
  background-color: $left-window-bg-color;
  padding-bottom: 10px;
}
/* #ifdef H5 */
.sidebar ::-webkit-scrollbar {
  display: none;
  // scrollbar-width: thin;
}
/* #endif */

.title {
  margin-left: 5px;
}
</style>
